{% if order.status == 'active' %}
<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h2>{% trans 'Manage hosting account' %}</h2>
                <ul class="data-header-actions">
                    <li class="domain-tabs active"><a href="#tab-details" class="btn btn-inverse btn-alt">{% trans 'Details' %}</a></li>
                    <li class="domain-tabs"><a href="#tab-change-pass" class="btn btn-inverse btn-alt">{% trans 'Password' %}</a></li>
                    <li class="domain-tabs"><a href="#tab-change-domain" class="btn btn-inverse btn-alt">{% trans 'Domain' %}</a></li>
                    <li class="domain-tabs"><a href="#tab-change-username" class="btn btn-inverse btn-alt">{% trans 'Username' %}</a></li>
                </ul>
            </header>
            <section class="tab-content">
                <div class="tab-pane active" id="tab-details">
                    <h3>{% trans 'Details' %}</h3>
                        {% set server = service.server %}
                        {% set hp = service.hosting_plan %}
                        <table class="table table-striped table-bordered table-condensed">
                            <tbody>
                            <tr>
                                <td>{% trans 'Domain' %}:</td>
                                <td>
                                    <a target="_blank" href="http://{{ service.domain }}">{{ service.domain }}</a>
                                </td>
                            </tr>

                            <tr>
                                <td>{% trans 'Server IP' %}:</td>
                                <td>{{ server.ip }}</td>
                            </tr>

                            <tr>
                                <td>{% trans 'Server Hostname' %}:</td>
                                <td>{{ server.hostname }}</td>
                            </tr>

                            <tr>
                                <td>{% trans 'Username' %}:</td>
                                <td>{{ service.username }}</td>
                            </tr>

                            <tr>
                                <td>{% trans 'Password' %}:</td>
                                <td>******</td>
                            </tr>

                            <tr>
                                <td>{% trans 'Hosting plan' %}:</td>
                                <td>{{ hp.name }}</td>
                            </tr>

                            <tr>
                                <td>{% trans 'Bandwidth' %}:</td>
                                <td>{{ hp.bandwidth }} MB / {% trans 'per month' %}</td>
                            </tr>
                            <tr>
                                <td>{% trans 'Disk quota' %}:</td>
                                <td>{{ hp.quota }} MB</td>
                            </tr>

                            </tbody>
                        </table>
                        <div class="control-group">
                            <div class="controls">
                            {% if service.domain_order_id %}
                                    <a class="btn btn-primary" href="{{ '/order/service/manage'|link }}/{{service.domain_order_id}}">{% trans 'Manage domain' %}</a>
                            {% endif %}
                                    <a class="btn btn-primary" href="{{ server.cpanel_url }}" target="_blank">{% trans 'Jump to cPanel' %}</a>
                            {% if service.reseller %}
                                    <a class="btn btn-primary" href="{{ server.reseller_cpanel_url }}" target="_blank">{% trans 'Reseller control panel' %}</a>
                            {% endif %}
                            </div>
                        </div>
                </div>
                <div class="tab-pane" id="tab-change-pass">
                    <h3>{% trans 'Change your FTP/cPanel/SSH password.' %}</h3>
                        <form action="" method="post" id="change-password" class="form-horizontal">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label" >{% trans 'Password' %}: </label>
                                    <div class="controls">
                                        <input type="password" name="password" value="{{ request.password }}" required="required">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" >{% trans 'Password Confirm' %}: </label>
                                    <div class="controls">
                                        <input type="password" name="password_confirm" value="{{ request.password_confirm }}" required="required">
                                    </div>
                                </div>

                                <input type="hidden" name="order_id" value="{{ order.id }}">
                                <div class="control-group">
                                    <div class="controls">
                                        <button class="btn btn-primary" type="submit" value="{% trans 'Change password' %}">{% trans 'Change password' %}</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                </div>

                <div class="tab-pane" id="tab-change-domain">
                    <h3>{% trans 'Change domain' %}</h3>
                        <form action="" method="post" id="change-domain" class="form-horizontal">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label" >{% trans 'New domain' %}: </label>
                                    <div class="controls">
                                        <input type="text" name="sld" value="{{ request.domain|default(service.sld) }}" required="required" class="span2">
                                        <input type="text" name="tld" value="{{ request.domain|default(service.tld) }}" required="required" class="span1">
                                    </div>
                                </div>
                                <input type="hidden" name="order_id" value="{{ order.id }}">
                                <div class="control-group">
                                    <div class="controls">
                                        <button class="btn btn-primary" type="submit" value="{% trans 'Change domain' %}">{% trans 'Change domain' %}</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                </div>

                <div class="tab-pane" id="tab-change-username">
                    <h3>{% trans 'Change username' %}</h3>
                        <form action="" method="post" id="change-username" class="form-horizontal">
                            <fieldset>
                            <div class="control-group">
                                <label class="control-label" >{% trans 'Username' %}: </label>
                                <div class="controls">
                                    <input type="text" name="username" value="{{ request.username|default(service.username) }}" required="required">
                                </div>
                            </div>

                                <input type="hidden" name="order_id" value="{{ order.id }}">
                                <div class="control-group">
                                    <div class="controls">
                                        <button class="btn btn-primary" type="submit" value="{% trans 'Change username' %}">{% trans 'Change username' %}</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                </div>
        </div>
    </article>
</div>

<script type="text/javascript">
$(function() {
    $('.domain-tabs a').bind('click',function(e){
        e.preventDefault();
        $(this).tab('show');
    });

    $('#change-domain').bind('submit',function(event){
        bb.post(
            'client/servicehosting/change_domain',
            $(this).serialize(),
            function(result) {
                bb.msg('Domain name was changed');
            }
        );
        return false;
    });

    $('#change-username').bind('submit',function(event){
        bb.post(
            'client/servicehosting/change_username',
            $(this).serialize(),
            function(result) {
                bb.msg('Account Username was changed');
            }
        );
        return false;
    });

    $('#change-password').bind('submit',function(event){
        bb.post(
            'client/servicehosting/change_password',
            $(this).serialize(),
            function(result) {
                bb.msg('Account Password was changed');
            }
        );
        return false;
    });

});
</script>
{% endif %}